<template>
  <div>
    <!-- 底部导航栏 -->
    <div class="fb-set roduns">
      <div class="gridList flex row-around col-center forFather">
        <div
          class="grid flex-col col-center"
          v-for="item in bottomNav"
          :key="item.routerName"
          @click="gto(item)"
        >
          <van-icon
            :class="[
              item.routerName == routerName ? 'isClosedForIcon font-30' : 'font-30',
            ]"
            :name="item.icon"
          />
          <span
            :class="[
              item.routerName == routerName ? 'isClosedForIcon font-10' : 'font-10',
            ]"
            >{{ item.name }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
  routerName: {
    type: String,
    required: true,
    default: "name",
  },
})
/**
 * 底部导航
 */
const bottomNav = ref([
  {
    name: "首页",
    icon: "home-o",
    routerName: "home",
    route: "/home",
  },
  {
    name: "我的",
    icon: "user-o",
    routerName: "user",
    route: "/user",
  },
]);
/**
 * 跳转
 */
const gto = (item) => {
  if (props.routerName != item.routerName) {
    router.push(item.route);
  }
};
</script>

<style lang="scss" scoped>
.roduns {
  border-radius: 30px 30px 0 0;
  background: #ffffff;
  height: 93px;
}
.isClosedForIcon {
  color: rgb(30, 176, 250);
}
</style>
